<template>
  <view class="wrap">
    <view id='rankImage' class="rankImage">
      <image :src="rankingImage" mode="widthFix" class="img"></image>
    </view>
    <view class="box">
      <view id='nav'>
        <uv-navbar leftText="" :fixed="false" title="" leftIconColor='#FFF' bgColor='rgba(0,0,0,0)' safeAreaInsetTop placeholder autoBack></uv-navbar>
      </view>
      <template v-if="pageShow">
        <view class="hd pagePd30" :style="`padding-top: ${top}px`">榜单每周一零点更新</view>
        <view class="base pagePd30">
          <view class="rule" @click="openRule">
            <uv-icon name="arrow-right" label='积分获取规则' labelPos='left' labelSize='24rpx' labelColor='#FFF' space='8rpx' color='#FFF' size='14rpx'></uv-icon>
          </view>
        </view>
        <view class="case pagePd30">
          <view class="rankList">
            <view class="rankTab">
              <image src="../../static/rankingTab.png" mode="widthFix" class="img"></image>
            </view>
            <view class="active" :class="{ left: active == 1, right: active == 2 }"></view>
            <view class="tabList">
              <view class="item" :class="{ current: active == 1 }" @click="tabClick(1)">本周</view>
              <view class="item" :class="{ current: active == 2 }" @click="tabClick(2)">上周</view>
            </view>
            <!-- <view class="my">
              <view class="left">
                <view class="num">18</view>
                <avatar src='/static/logo.png' styles='width: 60rpx;height: 60rpx;'></avatar>
                <view class="name">3232</view>
              </view>
              <view class="right">3232</view>
            </view>
            <uv-line color="#EFEFEF"></uv-line> -->
            <view class="list">
              <view class="my" v-for="(item,index) in list" :key="index">
                <view class="left">
                  <view class="num">
                    <view class="img" v-if="index < 3">
                      <image src="../../static/one.png" class="img" v-if="index == 0"></image>
                      <image src="../../static/two.png" class="img" v-if="index == 1"></image>
                      <image src="../../static/three.png" class="img" v-if="index == 2"></image>
                    </view>
                    <template v-else>{{ index + 1 }}</template>
                  </view>
                  <avatar :src='setUrl(item.avatar)' styles='width: 60rpx;height: 60rpx;'></avatar>
                  <view class="name">{{ item.nickname }}</view>
                </view>
                <view class="right">{{ item.total_score }}</view>
              </view>
            </view>
          </view>
        </view>
      </template>
    </view>
    <uv-popup ref="popup" mode='bottom' closeable round='40rpx' @change="change">
      <view class="popupBox">
        <view class="title">积分规则</view>
        <view class="list">
          <scroll-view scroll-y style="height: 700rpx;" >
            <view class="rules">
              <view class="item" v-for="(item,index) in rule" :key="index">
                <view class="name">{{ item.label }}</view>
                <view class="num">{{ item.value }}</view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
import rankingImage from '@/static/ranking.png';
import { onReady, onLoad } from '@dcloudio/uni-app';
import { ref, getCurrentInstance } from 'vue';
import { post } from '@/api';
import { setUrl } from '@/common';

const { ctx } = getCurrentInstance();
const popup = ref(null);
let id = '';
let top = ref(0);
let pageShow = ref(false);
let active = ref(1);
let list = ref([]);
const rule = [
  { label: '每周首次分享社群', value: 10 },
  { label: '每周首次分享主题', value: 10 },
  { label: '每周阅读主题', value: 1 },
  { label: '邀请新成员加入', value: 100 },
  { label: '被设置为精华主题', value: 50 },
  { label: '回答问题', value: 30 },
  { label: '提出问题被回答', value: 30 },
  { label: '主题/评论获得打赏', value: 20 },
  { label: '发布主题', value: 10 },
  { label: '主题/评论获得点赞', value: 50 },
  { label: '主题/评论获得评论', value: 50 },
  { label: '发布评论', value: 20 },
  { label: '点赞主题、评论', value: 10 },
  { label: '每日登录APP', value: 10 },
  { label: '每周阅读动态', value: 10 },
  { label: '购买动态', value: 20 },
  { label: '评论动态', value: 20 },
  { label: '动态发布评论', value: 20 },
  { label: '动态点赞、评论', value: 10 },
  { label: '购买课程', value: 30 },
  { label: '观看课程', value: 20 },
  { label: '购买直播', value: 30 },
  { label: '观看直播', value: 20 },
]

// onReady(() => {
//   setTimeout(() => {
//     getImageInfo()
//   }, 300)
// })
onLoad((option) => {
  id = option.id;
  getData();
})

function getData(){
  const params = {
    limit: 5,
    association_id: id,
    show_status: active.value
  }
  post('api/association/getAssociationUserScoreRanking', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      list.value = data.rank_list;
      getImageInfo()
    }
  })
}
function getImageInfo(){
  ctx.$uv.getRect('#rankImage').then(res => {
    const height = res.height;
    ctx.$uv.getRect('#nav').then(nv => {
      top.value = (height - nv.height) / 2 - 30;
      pageShow.value = true;
    })
  })
}
function openRule(){
  popup.value.open();
}
function tabClick(index){
  active.value = index;
  getData();
}
</script>

<style lang="scss" scoped>
  .popupBox{
    padding: 30rpx;
    padding-top: 0;
    .list{
      padding-top: 30rpx;
      .rules{
        background: #FCFCFC;
        border: 1rpx solid #EFEFEF;
        .item{
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 100rpx;
          padding: 0 24rpx;
          &:nth-of-type(2n){
            background: #F5F5F5;
          }
          .name{
            font-weight: 400;
            font-size: 28rpx;
            color: #2B2B2B;
          }
          .num{
            font-weight: 400;
            font-size: 28rpx;
            color: #2B2B2B;
          }
        }
      }
    }
    .title{
      font-weight: 500;
      font-size: 36rpx;
      color: #2B2B2B;
      text-align: center;
      padding-top: 40rpx;
    }
  }
  .box{
    position: relative;
    z-index: 2;
    .pagePd30{
      padding: 0 30rpx;
    }
    .case{
      padding-top: 46rpx;
      .rankList{
        width: 100%;
        background-color: #fff;
        border-radius: 24rpx;
        position: relative;
        min-height: 300rpx;
        .my{
          width: 100%;
          padding: 30rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left{
            display: flex;
            align-items: center;
            .img{
              width: 40rpx;
              height: 40rpx;
              font-size: 0;
            }
            .name{
              font-weight: 500;
              font-size: 28rpx;
              color: #2B2B2B;
              padding-left: 20rpx;
            }
            .num{
              width: 88rpx;
              font-weight: 500;
              font-size: 28rpx;
              color: #737373;
            }
          }
          .right{
            font-weight: 400;
            font-size: 28rpx;
            color: #2B2B2B;
            text-align: right;
          }
        }
        .active{
          width: 50%;
          background-color: #fff;
          position: absolute;
          top: -10rpx;
          z-index: 4;
          height: 120rpx;
          transition: all .5s;
          &.left{
            border-top-left-radius: 24rpx;
            border-top-right-radius: 154rpx;
            left: 0;
          }
          &.right{
            border-top-left-radius: 154rpx;
            border-top-right-radius: 24rpx;
            left: 50%;
          }
        }
        .tabList{
          width: 100%;
          height: 110rpx;
          display: flex;
          align-items: center;
          position: relative;
          z-index: 6;
          .item{
            flex: 1;
            font-weight: 500;
            font-size: 32rpx;
            color: #737373;
            text-align: center;
            transition: all .5s;
            &.current{
              color: #E43222;
            }
          }
        }
        .rankTab{
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 3;
        }
      }
    }
    .base{
      padding-top: 30rpx;
      .rule{
        padding: 10rpx 20rpx;
        border-radius: 30rpx;
        display: inline-block;
        background-color: rgba($color: #FFF, $alpha: 0.2);
      }
    }
    .hd{
      font-weight: 400;
      font-size: 28rpx;
      color: #FFFAEB;
    }
  }
  .rankImage{
    width: 100%;
    font-size: 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #FF3935;
  }
</style>